import React, { Component } from 'react'
import { List, InputItem, Button } from 'antd-mobile'
import { observer } from 'mobx-react/custom'
import CenterVM from 'cvm/center/center'
import './center.less'

const JoinList = observer(({ vm }) => {
  return (
    <div className='login-center'>
      <div className='jiuli-logo'>
        <img src={require('../../images/logo-small.png')} />
      </div>
      <List style={{ backgroundColor: 'white' }} className='picker-list' id='picker-list'>
        <InputItem
          placeholder='请输入手机号'
          clear
          // maxLength='11'
          type='phone'
          onChange={(v) => vm.onChange(v, 'Phone')}
          onBlur={(v) => vm.phoneCodeValid(v)}
          defaultValue={window.localStorage.getItem('WZUserName')}
        >手机号</InputItem>
        <InputItem
          placeholder='请输入密码'
          clear
          type='password'
          maxLength='16'
          onChange={(v) => vm.onChange(v, 'Password')}
          defaultValue={window.localStorage.getItem('WZPassWord')}
        >密码</InputItem>
      </List>
      <div className='forget-password'><span className='span' onClick={() => { vm.handleToForgetPassword() }}>忘记密码？</span></div>
      <div className='btn-box'>
        <Button type='primary' onClick={() => vm.handleSignin()}>登录</Button>
      </div>
    </div>
  )
})
@observer
class center extends Component {
  constructor (props) {
    super(props)
    this.vm = new CenterVM(props)
    window.document.title = '登录微职中心'
  }
  render () {
    return (
      <div>
        <JoinList vm={this.vm} />
      </div>
    )
  }
}

export default center
